<template>
    <div >
        <el-menu
        class="list"
        :default-active="active">
            <el-menu-item v-for="list in lists" :index="list.index" :key="list.index" @click="visit(list.id)">
                <span slot="title">{{list.name}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>

export default{
    name : 'mineList',
    mounted(){
        if(!this.$store.state.user.isList){
            let that = this;
            this.$axios.get('/static/user/list.json').then(function(response){
                that.$store.commit('saveList',response.data.list);
            }).catch(function(error){
                alert(error);
            })  
        }
    },
    computed:{
        lists:function(){
            return this.$store.state.user.list
        },
        active:function(){
            let lists  = this.$store.state.user.list;
            for(let i = 0;i<lists.length;i++){
                if(lists[i].id == this.$route.name){
                    return lists[i].index;
                }
            }
            return '1';
        }
    },
    methods:{
        visit:function(id){
            this.$router.push({'name':id});
        }
    }
}
</script>

<style scoped>
.list{
    min-height: 80vh;
}
</style>
